<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>

	<f:view>
		<ui:composition template="WEB-INF/templates/template.xhtml">


			<!-- Um den groÃen lila Hintergrund erscheinen zu lassen -->
			<ui:define name="lilabg">
				<div id="lilabg">&nbsp;</div>
			</ui:define>






			<ui:define name="content">

				<!-- SLIDER -->
				<!-- The Orbit slider is initialized at the bottom of the page by calling .orbit() on #slider -->

				<div class="row hide-for-small">
					<div class="twelve columns" style="z-index: 3;">
						<div id="sliderwrapper">
							<div id="slider">
								<img class="orbit-slide" src="#{animationBean.getFlyer(0)}" />
								<img class="orbit-slide" src="#{animationBean.getFlyer(1)}" />
								<img class="orbit-slide" src="#{animationBean.getFlyer(2)}" />
							</div>
							<div id="sliderbg">&nbsp;</div>
							<div id="sliderbg2">&nbsp;</div>
						</div>
						<hr />
					</div>
				</div>


				<!-- Three-up Content Blocks -->

				<div class="row secondRow">


					<div class="four columns">
						<h3>
							<h:outputText id="topevent0"
								value="#{animationBean.getHeadline(0)}"></h:outputText>
						</h3>
						<a href="event.xhtml?id=#{animationBean.getEventId(0)}"><img
							src="#{animationBean.getFlyer(0)}" class="border" /></a>
						<h4>
							<h:outputText id="date0" value="#{animationBean.getDate(0)}"></h:outputText>
						</h4>
						<p>
							<h:outputText id="description0"
								value="#{animationBean.getDescription(0)}"></h:outputText>
						</p>
					</div>

					<div class="four columns">
						<h3>
							<h:outputText id="topevent1"
								value="#{animationBean.getHeadline(1)}"></h:outputText>
						</h3>
						<a href="event.xhtml?id=#{animationBean.getEventId(1)}"><img
							src="#{animationBean.getFlyer(1)}" class="border" /></a>
						<h4>
							<h:outputText id="date1" value="#{animationBean.getDate(1)}"></h:outputText>
						</h4>
						<p>
							<h:outputText id="description1"
								value="#{animationBean.getDescription(1)}"></h:outputText>
						</p>
					</div>

					<div class="four columns">
						<h3>
							<h:outputText id="topevent2"
								value="#{animationBean.getHeadline(2)}"></h:outputText>
						</h3>
						<a href="event.xhtml?id=#{animationBean.getEventId(2)}"><img
							src="#{animationBean.getFlyer(2)}" class="border" /></a>
						<h4>
							<h:outputText id="date2" value="#{animationBean.getDate(2)}"></h:outputText>
						</h4>
						<p>
							<h:outputText id="description2"
								value="#{animationBean.getDescription(2)}"></h:outputText>
						</p>
					</div>

				</div>

				<hr />

				<!-- EVENTS -->

				<div class="row eventslist">
					<div class="twelve columns" style="text-align:center;">
						<h2>Kommende Events</h2>
					</div>

					<div class="four columns">
						<!--  one Event -->
						<div class="row event">
							<div class="three columns eventimg">
								<a href="event.xhtml?id=#{animationBean.getEventId(3)}"><img
									src="#{animationBean.getFlyer(3)}" /></a>
							</div>
							<div class="nine columns eventinfo">
								<h4>
									<a href="event.xhtml?id=#{animationBean.getEventId(3)}"><h:outputText
											id="topevent3" value="#{animationBean.getHeadline(3)}"></h:outputText></a>
								</h4>
								<p>
									<h:outputText id="description3"
										value="#{animationBean.getDescription(3)}"></h:outputText>
								</p>
							</div>
						</div>
						<!-- END one Event -->

						<!--  one Event -->
						<div class="row event">
							<div class="three columns eventimg">
								<a href="event.xhtml?id=#{animationBean.getEventId(4)}"><img
									src="#{animationBean.getFlyer(4)}" /></a>
							</div>
							<div class="nine columns eventinfo">
								<h4>
									<a href="event.xhtml?id=#{animationBean.getEventId(4)}"><h:outputText
											id="topevent4" value="#{animationBean.getHeadline(4)}"></h:outputText></a>
								</h4>
								<p>
									<h:outputText id="description4"
										value="#{animationBean.getDescription(4)}"></h:outputText>
								</p>
							</div>
						</div>
						<!-- END one Event -->

					</div>

					<div class="four columns">
						<!--  one Event -->
						<div class="row event">
							<div class="three columns eventimg">
								<a href="event.xhtml?id=#{animationBean.getEventId(5)}"><img
									src="#{animationBean.getFlyer(5)}" /></a>
							</div>
							<div class="nine columns eventinfo">
								<h4>
									<a href="event.xhtml?id=#{animationBean.getEventId(5)}"><h:outputText
											id="topevent5" value="#{animationBean.getHeadline(5)}"></h:outputText></a>
								</h4>
								<p>
									<h:outputText id="description5"
										value="#{animationBean.getDescription(5)}"></h:outputText>
								</p>
							</div>
						</div>
						<!-- END one Event -->


						<!--  one Event -->
						<div class="row event">
							<div class="three columns eventimg">
								<a href="event.xhtml?id=#{animationBean.getEventId(6)}"><img
									src="#{animationBean.getFlyer(6)}" /></a>
							</div>
							<div class="nine columns eventinfo">
								<h4>
									<a href="event.xhtml?id=#{animationBean.getEventId(6)}"><h:outputText
											id="topevent6" value="#{animationBean.getHeadline(6)}"></h:outputText></a>
								</h4>
								<p>
									<h:outputText id="description6"
										value="#{animationBean.getDescription(6)}"></h:outputText>
								</p>
							</div>
						</div>
						<!-- END one Event -->


					</div>

					<div class="four columns">
						<!--  one Event -->
						<div class="row event">
							<div class="three columns eventimg">
								<a href="event.xhtml?id=#{animationBean.getEventId(7)}"><img
									src="#{animationBean.getFlyer(7)}" /></a>
							</div>
							<div class="nine columns eventinfo">
								<h4>
									<a href="event.xhtml?id=#{animationBean.getEventId(7)}"><h:outputText
											id="topevent7" value="#{animationBean.getHeadline(7)}"></h:outputText></a>
								</h4>
								<p>
									<h:outputText id="description7"
										value="#{animationBean.getDescription(7)}"></h:outputText>
								</p>
							</div>
						</div>
						<!-- END one Event -->

						<!--  one Event -->
						<div class="row event">
							<div class="three columns eventimg">
								<a href="event.xhtml?id=#{animationBean.getEventId(8)}"><img
									src="#{animationBean.getFlyer(8)}" /></a>
							</div>
							<div class="nine columns eventinfo">
								<h4>
									<a href="event.xhtml?id=#{animationBean.getEventId(8)}"><h:outputText
											id="topevent8" value="#{animationBean.getHeadline(8)}"></h:outputText></a>
								</h4>
								<p>
									<h:outputText id="description8"
										value="#{animationBean.getDescription(8)}"></h:outputText>
								</p>
							</div>
						</div>
						<!-- END one Event -->

					</div>

				</div>

				<!-- Call to Action Panel -->
				<!--
  <div class="row">
    <div class="twelve columns">

      <div class="panel">
        <h4>Get in touch!</h4>

        <div class="row">
          <div class="nine columns">
            <p>We'd love to hear from you, you attractive person you.</p>
          </div>
          <div class="three columns">
            <a href="#" class="radius button right">Contact Us</a>
          </div>
        </div>
      </div>

    </div>
  </div>
  -->

			</ui:define>

			<ui:define name="scripts">
				<script type="text/javascript">
					$(document).ready(function() {
						$('#slider').orbit();
					});
				</script>
			</ui:define>

		</ui:composition>
	</f:view>

</h:body>
</html>
